<template>
  <div class="question-container">
    <el-card>
      <!-- 提示 -->
      <el-row>
        <el-col :span="12">
          <span style="font-size:12px;color:pink">说明：目前支持学科和关键字的条件筛选</span>
        </el-col>
        <el-col :span="12">
          <el-row
            type="flex"
            justify="end"
          >
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="hJump"
            >新增试题</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- form表单 -->
      <el-form
        :inline="true"
        style="margin-top:15px"
        size="small"
        label-width="auto"
        :model="form"
      >
        <el-form-item label="学科">
          <el-select
            v-model="form.subjectID"
            style="width:296.5px"
            @change="subjectListList"
          >
            <el-option
              v-for="(item,index) in st"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select
            v-model="form.catalogID"
            style="width:296.5px"
          >
            <el-option
              v-for="(item,index) in directoryListing"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            v-model="form.tags"
            style="width:296.5px"
          >
            <el-option
              v-for="(item,index) in theTagLists"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="form.keyword"
            style="width:296.5px"
            placeholder="请根据题干搜索"
          />
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select
            v-model="form.questionType"
            style="width:296.5px"
          >
            <el-option
              v-for="(item,index) in questionType"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select
            v-model="form.difficulty"
            style="width:296.5px"
          >
            <el-option
              v-for="(item,index) in difficulty"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select
            v-model="form.direction"
            style="width:296.5px"
          >
            <el-option
              v-for="(item,index) in direction"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select
            v-model="form.creatorID"
            style="width:296.5px"
          >
            <el-option
              v-for="(item,index) in listrs"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-model="form.remarks"
          label="题目备注"
        >
          <el-input style="width:296.5px" />
        </el-form-item>
        <el-form-item
          v-model="form.shortName"
          label="企业简称"
        >
          <el-input style="width:296.5px" />
        </el-form-item>
        <el-form-item label="城市">
          <el-col :span="7">
            <el-select
              v-model="form.province"
              class="filter-item"
              style="width: 140px;"
              filterable
              @keyup.enter="handleFilter"
              @change="handleProvince"
            >
              <el-option
                v-for="item in citySelect.province"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col
            :span="7"
            style="margin-left:65px"
          >
            <el-select
              v-model="form.city"
              class="filter-item"
              style="width: 140px;"
              filterable
              @keyup.enter="handleFilter"
            >
              <el-option
                v-for="item in citySelect.cityDate"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row
            type="flex"
            justify="end"
            style="width:315px"
          >
            <el-col :span="29">
              <el-button @click="questionReset">清除</el-button>
              <el-button
                type="primary"
                @click="questionSearch"
              >搜索</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <!-- 切换标签页 -->
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="全部"
          name="all"
        />
        <el-tab-pane
          label="待审核"
          name="0"
        />
        <el-tab-pane
          label="已审核"
          name="1"
        />
        <el-tab-pane
          label="已拒绝"
          name="2"
        />
      </el-tabs>
      <!--数据条数  -->
      <el-alert
        v-if="alertText !==''"
        :title="alertText"
        type="info"
        show-icon
      />
      <!-- 表格 -->
      <el-table
        :data="lists"
        style="width: 100%;margin-top:15px"
        :header-cell-style="{background:'#fafafa',color:'#606266'}"
      >
        <el-table-column
          label="试题编号"
          prop="number"
          width="130px"
        />
        <el-table-column
          label="学科"
          prop="subject"
          width="140px"
        />
        <el-table-column
          label="目录"
          prop="catalog"
          width="140px"
        />
        <el-table-column
          label="题型"
          width="140px"
        >
          <template v-slot="{row}">
            <span v-if="row.questionType === '1'">单选</span>
            <span v-else-if="row.questionType === '2'">多选</span>
            <span v-else-if="row.questionType === '3'">简答</span>
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="310px"
        >
          <template v-slot="{row}">
            <span v-html="row.question" />
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="150px"
        >
          <template v-slot="{row}">
            <span>{{ row.addDate | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          prop="difficulty"
          width="140px"
        >
          <template v-slot="{row}">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else-if="row.difficulty === '3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120"
        />
        <el-table-column
          label="审核状态"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.chkState===0">待审核</span>
            <span v-else-if="scope.row.chkState===1">通过</span>
            <span v-else-if="scope.row.chkState===2">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="120"
        />
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="120"
        />
        <el-table-column
          label="发布状态"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.publishState === 1">已发布</span>
            <span v-else-if="scope.row.chkState === 1">已下架</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="200px"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              size="small"
              @click="hPreview(row.id)"
            >预览</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="row.chkState ? true : false"
              @click="hCheck(row.id)"
            >审核</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="row.publishState ? true : false"
              @click="hChange(row.id)"
            >修改</el-button>
            <el-button
              type="text"
              size="small"
              @click="hChangePublishState(row)"
            >{{ row.publishState === 0 ? '上架' : '下架' }}</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="row.publishState? true:false"
              @click="deleteElem(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="end"
        style="margin-top:15px"
      >
        <el-pagination
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      :data="previewData"
      width="50%"
    >
      <!-- 第一个盒子 -->
      <el-row
        :gutter="20"
        style="padding:10px"
      >
        <el-col :span="6">
          <div>【题型】：
            <span v-if="previewData.questionType === '1'">单选</span>
            <span v-else-if="previewData.questionType === '2'">多选</span>
            <span v-else-if="previewData.questionType === '3'">简答</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>【编号】：{{ previewData.id }}</div>
        </el-col>
        <el-col :span="6">
          <div>【难度】：
            <span v-if="previewData.difficulty === '1'">简单</span>
            <span v-else-if="previewData.difficulty === '2'">一般</span>
            <span v-else-if="previewData.difficulty === '3'">困难</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>【标签】：{{ previewData.tags }}</div>
        </el-col>
      </el-row>
      <el-row
        :gutter="20"
        style="padding:10px"
      >
        <el-col :span="6">
          <div>【学科】：{{ previewData.subjectName }}</div>
        </el-col>
        <el-col :span="6">
          <div>【目录】：{{ previewData.catalogID }}</div>
        </el-col>
        <el-col :span="6">
          <div>【方向】：{{ previewData.direction }}</div>
        </el-col>
      </el-row>
      <hr>
      <!-- 题目 -->
      <div>
        【题干】：
        <span v-html="previewData.question" />
        <!-- <div v-html="previewData.question">{{previewData.question}}</div> -->
        <div v-if="previewData.questionType === '1'">
          <div>选项：（以下选中的选项为正确答案）</div>
          <el-radio-group v-model="radio">
            <el-radio
              v-for="option in previewData.options"
              :key="option.code"
              style="padding:10px 0;display:block"
              :label="option.isRight"
              @click.native="hPrevent"
            >{{ option.title }}</el-radio>
          </el-radio-group>
        </div>
        <div v-else-if="previewData.questionType === '2'">
          <div>选项：（以下选中的选项为正确答案）</div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="option in previewData.options"
              :key="option.code"
              style="padding:10px 0;display:block"
              :label="option.code"
              @click.native="hPrevent"
            >{{ option.title }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <hr>
      <!--  参考答案-->
      <div>
        <!-- 点击事情答案预览取反 -->
        <div>【参考答案】： <el-button
          type="danger"
          @click="hvideoShow(previewData.videoURL)"
        >视频答案预览</el-button>
        </div>
        <!--   v-show="isShow"  控制视频的显示隐藏 -->
        <video
          v-if="isShow"
          :src="previewData.videoURL"
          style="width:300px"
          controls="controls"
          muted
          autoplay
        />

      </div>
      <!-- 分割线 -->
      <hr>
      <!-- 答案解析 -->
      <div>
        【答案解析】： <span v-html="previewData.answer" />
        <!-- //<div v-html="previewData.answer">{{previewData.answer}}</div> -->
      </div>
      <hr>
      <!-- 题目备注 -->
      <div>
        <div>【题目备注】：{{ previewData.remarks }}</div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          :loading="isLoading"
          @click="btn"
        >关闭</el-button>
      </span>
    </el-dialog>
    <!--审核弹出对话框-->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogFormVisible"
      width="25%"
    >
      <el-form :model="form">
        <el-form-item>
          <el-radio
            v-model="form.chkState"
            label="1"
          >通过</el-radio>
          <el-radio
            v-model="form.chkState"
            label="2"
          >拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.chkRemarks"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
            resize="none"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="hSubmitRemarks"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 题库
import { choice, remove, detail, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'
// 学科d
import { list as listT } from '@/api/hmmm/subjects.js'
// 标签
import { list as arrs } from '@/api/hmmm/tags.js'
// 映射
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
// 用户列表
import { list } from '@/api/base/users.js'
// 目录
import { list as lis } from '@/api/hmmm/directorys.js'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  data() {
    return {
      activeName: 'all', // 默认选中
      lists: [], // 精选题库数据
      currentPage: 2,
      page: {
        page: 1, // 当前页数
        pagesize: 5, // 页面显示条数
        total: 0
      },
      subjectList: [], // 学科简单数据
      st: [], // 保存学科目录数据
      directoryListing: [], // 获取目录数据列表数据
      theTagLists: [], // 标签简单数据
      listrs: [], // 录入人
      directions: [], // 方向
      questionType: questionType, // 试题类型映射
      difficulty: difficulty, // 类型映射
      direction: direction, // 类型映射
      State: null, // 用来保存tab切换的name值
      form: {
        subjectID: null, // 学科
        catalogID: '', // 二级目录
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        province: '', // 省份
        city: '', // 城市
        keyword: null, // 关键字
        remarks: '', // 题目备注
        enterpriseID: '',
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        chkState: '', // 审核状态
        chkRemarks: '' // 审核意见
      },
      // 城市映射
      citySelect: {
        province: [],
        cityDate: []
      },
      // 数据条数
      alertText: '',
      dialogVisible: false, // 弹层按钮
      isShow: false, // 控制视频详解按钮
      radio: 1, // 双向绑定单选框
      isLoading: false, // loding状态
      checkList: [], // 保存多选的选项
      previewData: {}, // 当点击预览按钮时获取当前行的数据
      dialogFormVisible: false, // 控制修改弹层
      checkId: '', // 审核id
      previewId: '' // 预览id
    }
  },
  created() {
    this.choice() // 请求精选题库数据
    this.listT() // 获取学科列表
    this.list()// 获取用户信息
    this.getCityData() // 获取县
  },
  methods: {
    // 请求基础题库列表数据
    async choice() {
      // 需要搜索的数据
      const query = {
        page: this.page.page,
        pagesize: this.page.pagesize,
        chkState: this.State,
        subjectID: this.form.subjectID,
        keyword: this.form.keyword
      }
      console.log(query)
      const { data } = await choice(query)
      // console.log(data)
      this.lists = data.items
      this.page.total = data.counts
      this.alertText = `数据一共 ${data.counts} 条`
    },
    // 点击分几页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      // 更新数据
      this.choice()
    },
    // 点击切换页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      // 更新数据
      this.choice()
    },
    // 学科列表
    async listT() {
      const { data } = await listT()
      // console.log(data)
      this.subjectList = data.items
      // console.log(this.subjectList)
      this.subjectList.forEach((item) => { this.st.push(item.subjectName) })
    },
    // 获取用户信息
    async list() {
      const { data } = await list()
      // console.log(data)
      data.list.forEach((item) => {
        // console.log(item.username)
        this.listrs.push(item.username)
      })
      // console.log(this.listrs)
    },
    // 获取县
    getCityData: function() {
      this.citySelect.province = provinces()
    },
    // 选市获取到县
    handleProvince: function(e) {
      // console.log(e)
      this.citySelect.cityDate = citys(e)
      this.form.city = []
    },
    // 当前面输入框变化
    subjectListList(e) {
      // console.log(e) // 选中的名字
      this.directoryListing = [] // 清空数组
      this.form.catalogID = '' // 清空选框里面的数据
      this.subjectList.forEach(async(item) => {
        if (item.subjectName === e) {
          console.log(1)
          // const id = item.id
          // console.log(id)
          const { data } = await lis()
          console.log(data)
          data.items.forEach((key) => {
            // console.log(key.subjectID)
            if (key.subjectID === item.id) {
              // console.log(key.directoryName)
              this.directoryListing.push(key.directoryName)
              // console.log(this.directoryListing)
            }
          })
          const arr = await arrs()
          console.log(item.subjectName)

          arr.data.items.forEach((arrs) => {
            console.log(arrs.subjectName)
            if (item.subjectName === arrs.subjectName) {
              // console.log(arrs)
              // console.log(1)
              this.theTagLists.push(arrs.tagName)
              console.log(this.theTagLists)
            }
          })
        }
      })
    },
    // 清空按钮
    questionReset() {
      this.form = {
        subjectID: null, // 否int学科id
        catalogID: '', // 二级目录
        tags: '', // 标签简单数据
        keyword: null, // 关键字
        questionType: '', // 否int题目类型:1(单选),2(多选),3(简答)
        difficulty: '', // 否int题目难度: 1(简单),2(一般),3(困难)
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '',
        city: ''
      }
      // 调用更新数据
      this.choice()
    },
    // 搜索按钮
    async questionSearch() {
      this.page.page = 1
      this.choice()
    },
    // tab栏切换
    handleClick(tab, event) {
      // console.log(tab, event)
      // console.log(tab.name) // 得到点击的name
      if (this.activeName === 'all') {
        this.State = null
        this.choice()
      } else {
        this.State = Number(this.activeName)
        this.page.page = 1
        this.choice()
      }
    },
    // 删除
    async deleteElem(data) {
      try {
        // console.log(data)
        await this.$confirm('此操作将永久删除,', '提示')
        // 调用接口
        await remove(data)
        // 更新视图
        this.choice()
        // 提示信息
        this.$message.success('删除员工成功')
      } catch (err) {
        console.log(err)
      }
    },
    // // 预览
    async hPreview(id) {
      // 获取 题库详情
      const { data: res } = await detail({ id: id })
      // console.log(res)
      this.previewData = res
      this.dialogVisible = true // 打开弹层
    },
    // 操作----预览  阻止默认事件
    hPrevent(e) {
      // console.log(e)
      e.preventDefault()
    },
    // 审核
    hCheck(id) {
      console.log(id)
      // 打开弹层
      this.dialogFormVisible = true
      // 将id存储
      this.checkId = id
    },
    // 点击审核确定按钮
    async hSubmitRemarks() {
      // 点击确定前判断输入框是否有内容
      if (this.form.chkRemarks === '' || this.form.chkState === '') {
        return this.$message.warning('请输入审核意见')
      }
      this.dialogFormVisible = false
      const id = this.checkId // 在审核保存的id拿下来
      try {
        // 获取参数
        const arr = {
          id,
          chkState: Number(this.form.chkState), // 将字符串转化成数字
          chkRemarks: this.form.chkRemarks
        }
        // 调用接口
        await choiceCheck(arr)
        // 提示
        this.$message.success('操作成功')
        // 重新加载列表
        this.choice()
      } catch (err) {
        console.log(err)
      }
    },
    // 视频mp4没链接的时候  就不显示
    hvideoShow(url) {
      if (url !== '') {
        this.isShow = !this.isShow
      } else {
        this.$message.error('没有链接 别他妈点')
      }
    },
    // 修改
    hChange(id) {
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    // 上架
    hChangePublishState(data) {
      console.log(data)
      console.log(data.publishState) //   0- 下架   1 - 上架
      console.log(data.chkState) // 审核状态  1 - 通过  2- 拒绝
      this.$confirm(`你确定${data.publishState === 0 ? '上架' : '下架'}这道题吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          // if发判断是否通过审核
          if (data.chkState === 1) {
            // 通过审核  调用接口
            await choicePublish({ id: data.id, publishState: data.publishState === 1 ? 0 : 1 })
            // 更新视图
            this.choice()
            // 提示用户
            this.$message.success(`${data.publishState === 1 ? '下架' : '上架'}成功`)
          } else {
            // 没审核得拦截
            this.$message.warning('请先通过审核')
          }
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 预览关闭按钮
    btn() {
      this.dialogVisible = false
      this.isShow = false // 关闭视频按钮
    },
    // 新增试题  跳转页面
    hJump() {
      this.$router.push('/questions/new')
    }
  }
}
</script>

<style scoped lang="scss">
.el-form--inline .el-form-item:nth-child(4n) {
  margin-right: 0 !important;
}
.question-container {
  margin: 10px 0;
  padding: 0 10px;
}
</style>
